<template>
  <div class="app">
    <div v-if="isShowEdit">
      <input type="text" v-model="editValue" ref="inp" />
      <button>确认</button>
    </div>
    <div v-else>
      <span>{{ title }}</span>
      <button @click="showFn">编辑</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "大标题",
      isShowEdit: false,
      editValue: "",
    };
  },
  methods: {
    /**
      vue中视图是异步更新的
      - 后期, 在方法中如果要操作DOM, 如果打印要操作的DOM为undefined
      - 则需要等视图更新完毕再操作
        this.$nextTick(()=>{
          // 视图更新完毕了才会执行
        })
     */
    showFn() {
      // 1. 显示输入框 (Vue中视图是异步更新的)
      this.isShowEdit = true;
      // 2. 等视图更新了, 再让输入框获得焦点
      this.$nextTick(() => {
        console.log(this.$refs.inp);
        this.$refs.inp.focus();
      });

      // setTimeout(() => {
      //   this.$refs.inp.focus();
      // }, 1000);
    },
  },
};
</script>

<style>
</style>